<template>
    <div class="contaienr">
        <div>
            <div class="header flex items-center">
                <el-card class="left">
                    <img src="../../assets/image/dy/img1.png" class="icon-head" alt="">
                    <div class="flex flex-jc-sb items-center mg-t-16">
                        <div class="name fs-14 bold">抖音报白</div>
                        <div class="date fc-lightgray fs-12">发布时间：2023-10-20</div>
                    </div>
                </el-card>
                <div class="right flex-1">
                    <div class="header bold">
                        数据表现
                    </div>
                    <div class="flex mg-t-40">
                        <div class="item flex-1">
                            <div class="title fc-lightgray">曝光量(次)</div>
                            <div class="value mg-t-10 bold fs-24">{{ dyData.exposureCount ?? 0 }}</div>
                            <img class="icon-chart" src="../../assets/image/dashboard/line-1.png" alt="">
                        </div>
                        <div class="item flex-1">
                            <div class="title fc-lightgray">点击量(次)</div>
                            <div class="value mg-t-10 bold fs-24">{{ dyData.clickCount ?? 0 }}</div>
                            <img class="icon-chart" src="../../assets/image/dashboard/line-2.png" alt="">
                        </div>
                        <div class="item flex-1">
                            <div class="title fc-lightgray">拨号量(次)</div>
                            <div class="value mg-t-10 bold fs-24">{{ dyData.callCount ?? 0 }}</div>
                            <img class="icon-chart" src="../../assets/image/dashboard/line-3.png" alt="">
                        </div>
                        <div class="item flex-1">
                            <div class="title fc-lightgray">成交量(次)</div>
                            <div class="value mg-t-10 bold fs-24">{{ dyData.dealCount ?? 0 }}</div>
                            <img class="icon-chart" src="../../assets/image/dashboard/line-4.png" alt="">
                        </div>
                        <div class="item flex-1">
                            <div class="title fc-lightgray">成交金额(元)</div>
                            <div class="value mg-t-10 bold fs-24"><span class="fs-12">¥</span>{{ dyData.dealAmount ?? 0 }}</div>
                            <img class="icon-chart" src="../../assets/image/dashboard/line-5.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-card class="mg-t-20">
            <div class="body">
                <chartLine title="统计分析" />
            </div>
        </el-card>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getDyData, getChartData } from '@/api/baobai/dyData.ts'
import chartLine from './components/chart-line.vue'

const dyData = ref({})

const getData = () => {
    getDyData({}).then(res => {
        dyData.value = res
    })
}

onMounted(() => {
    getData()
})

</script>
<style lang="scss" scoped>
.contaienr {
    padding: 20px;
    box-sizing: border-box;
}

.left {
    width: 362px;
    height: 228px;
    border-radius: 8px;
    background: #fff;
    // padding: 16px 16px 44px;
}

.right {
    height: 228px;
    border-radius: 8px;
    background: #F7FBFE;
    margin-left: 16px;
    padding: 24px;
    box-sizing: border-box;
}

.icon-head {
    width: 100%;
    height: 168px;
    background: #fcc;
    display: block;
    border-radius: 8px;
}

.fc-lightgray {
    color: #6B6B86;
}

.item {
    text-align: center;
}
.mg-t-40 {
    margin-top: 40px;
}
.icon-chart {
    margin-top: 18px;
}
</style>